'use strict';
var React = require('react');
class RePanel extends React.Component {
    constructor(props) {
        super(props);
        this.renderLink=this.renderLink.bind(this);
        this.renderContent=this.renderContent.bind(this);
    }

    //根据需要渲染链接
    renderLink(){
        if(this.props.moreLink!==undefined){
            return <a ref="RePanel_MoreLink" className="RePanel_MoreLink" href={this.props.moreLink}>更多 &gt;&gt;</a>
        }
    }

    //渲染主体部分
    renderContent(){
        if(this.props.children&&this.props.children.map)
        {
            return this.props.children.map((item, i)=> {
                return <div key={"RePanel_Content_Item"+i} className="RePanel_Content_Item">{item}</div>
            });
        }
        else {
            if(this.props.children){
                return <div key="RePanel_Content_Item" className="RePanel_Content_Item">{this.props.children}</div>
            }
        }
    }

    //渲染后动态修改样式，使标题文字垂直居中
    componentDidMount() {
        //减去border宽度
        var height=this.refs.RePanel_Title.offsetHeight-1;
        this.refs.RePanel_TitleValue.style.lineHeight=height+'px';
        if(this.props.moreLink!==undefined){
            this.refs.RePanel_MoreLink.style.lineHeight=height+'px';
        }
    }

    render(){
        var style={};
        if(this.props.width!==undefined){
            style.width=this.props.width;
        }
        if(this.props.height!==undefined){
            style.height=this.props.height;
        }
        return (
            <div className="RePanel_Container" style={style}>
                <div ref="RePanel_Title" className="RePanel_Title">
                    <div className="Repanel_ImgDiv">
                        <img src={this.props.titleImage}/>
                    </div>
                    <div ref="RePanel_TitleValue" className="RePanel_TitleValue">{this.props.title}</div>
                    {this.renderLink()}
                    <div className="Repanel_TitleBottom">
                        <div className="Repanel_TitleBottom_First"></div>
                        <div className="Repanel_TitleBottom_Second"></div>
                    </div>
                </div>
                <div className="RePanel_Content">
                    {this.renderContent()}
                </div>
            </div>
        );
    }
}

RePanel.propTypes={
    titleImage:React.PropTypes.string.isRequired,
    moreLink:React.PropTypes.string,
    width:React.PropTypes.string,
    height:React.PropTypes.string
};

module.exports=RePanel;